<template>
  <div>
    <hr />
    <ul v-if="datalist.length !== 0">
      <li v-for="item in datalist" :key="item.id" class="titem">
        <input type="checkbox" v-model="item.completed" />
        <input
          class="inp"
          @focus="editorTodo(item)"
          @keyup.esc="cancelEditor(item)"
          type="text"
          disabled
          v-model="item.title"
        />
        <a href="javascript:void(0)" @click="delTodo(item)" class="btnDel"
          >删除</a
        >
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import toDoFunc from "../operation";
const props = defineProps({
  mainTitle: {
    type: String,
    default: () => "待办事项",
  },
  datalist: {
    type: Array,
    default: () => [],
  },
  todoLists: {
    type: Array,
    default: () => [],
  },
});
const { editorTodo, cancelEditor, delTodo } = toDoFunc(props.todoLists, "");
</script>

<style scoped>
.inp {
  border: none;
  background-color: #fff;
}
.btnDel {
  color: blue;
  font-size: 12px;
  border: 1px solid rgb(240, 240, 240);
  padding: 3px;
}
</style>